import React, { useEffect, useRef, useState } from "react";
import { Button, Space, Input, Pagination, Select } from "antd";
import { connect } from "react-redux";
import action from "../../../store/Actions";
import { exportExcel, importsExcel } from "../../../utils/excel";
import "./index.less";
import Navigation from "src/component/Navigation";
import Table from "src/component/table";
import MyAlert from "src/component/MyAlert";
import {
  PlusCircleOutlined,
  DownloadOutlined,
  UploadOutlined,
  EditTwoTone,
  DeleteTwoTone,
  SnippetsTwoTone,
} from "@ant-design/icons";
const Employee = (props) => {
  //导入元素
  const importElement: any = useRef();
  //设置表格头
  const [header, setHeader] = useState([
    { title: "id", dataIndex: "id", key: "id", className: "text-monospace" },
    { title: "number", dataIndex: "number", key: "number" },
    { title: "name", dataIndex: "name", key: "name" },
    { title: "sex", dataIndex: "sex", key: "sex" },
    { title: "age", dataIndex: "age", key: "age" },
    { title: "userRoot", dataIndex: "userRoot", key: "userRoot" },
    { title: "phone", dataIndex: "phone", key: "phone" },
    { title: "email", dataIndex: "email", key: "email" },
    { title: "college", dataIndex: "college", key: "college" },
    { title: "campus", dataIndex: "campus", key: "campus" },
    { title: "stage", dataIndex: "stage", key: "stage" },
    { title: "position", dataIndex: "position", key: "position" },
  ]);
  //设置行标题
  const [columns, setColumns] = useState([]);
  //生成表格数据
  const [tableList, setTableList] = useState([]);
  //设置当前页码
  const [current, setCurrent] = useState(1);
  //设置页码条数
  const [size, setSize] = useState(10);
  //设置表头
  const MenuList = [
    {
      id: 1,
      college: "网站工程",
      campus: [
        {
          id: 1,
          name: "北京校区",
        },
        {
          id: 2,
          name: "保定校区",
        },
        {
          id: 3,
          name: "邯郸校区",
        },
      ],
    },
    {
      id: 2,
      college: "传媒学院",
      campus: [
        {
          id: 1,
          name: "保定校区",
        },
      ],
    },
    {
      id: 3,
      college: "计算机学院",
      campus: [
        {
          id: 1,
          name: "保定校区",
        },
      ],
    },
    {
      id: 4,
      college: "人工智能学院",
      campus: [
        {
          id: 1,
          name: "保定校区",
        },
      ],
    },
  ];
  const { Option } = Select;
  //设置标题
  const [title, setTitle] = useState("");
  //是否添加
  const [isAdd, setIsAdd] = useState(false);
  //添加信息
  const [addObj, setAddObj] = useState({
    id: props.employee.length + 1,
    number: new Date().getFullYear() + '' + Math.floor(Math.random()*(9999 - 1000)+1000),
    name: "",
    sex: "",
    age: "",
    userRoot: "",
    phone: "",
    email: "",
    college: "",
    campus: "",
    stage: "",
    position: "",
    state:"",
    identity:"",
    remark:""
  });
  //导航菜单
  const college = [
    {
      id: 1,
      college: "网站工程学院",
      campus: [
        {
          id: 1,
          name: "北京校区",
        },
        {
          id: 2,
          name: "保定校区",
        },
        {
          id: 3,
          name: "邯郸校区",
        },
      ],
    },
    {
      id: 2,
      college: "传媒学院",
      campus: [
        {
          id: 1,
          name: "保定校区",
        },
      ],
    },
    {
      id: 3,
      college: "计算机科学与信息技术学院",
      campus: [
        {
          id: 1,
          name: "保定校区",
        },
      ],
    },
    {
      id: 4,
      college: "人工智能学院",
      campus: [
        {
          id: 1,
          name: "保定校区",
        },
      ],
    },
  ];
  //校区列表
  const [campusList, setCampusList] = useState([]);
  //阶段列表
  const [stage, setStage] = useState([]);
  //员工信息
  const [employeeObj, setEmployeeObj] = useState<any>({});
  //查看
  const [show, setShow] = useState(false);
  //修改
  const [edit, setEdit] = useState(false);
  //删除
  const [del,setDel] = useState(false);

  //筛选数据
  const TableList = (data, college = "网站工程", campus = "北京校区") => {
    //设置开始位置
    let start = (current - 1) * size;
    //设置结束位置
    let end = start + size;
    let result = data
      .filter((item) => {
        return (
          item.college.indexOf(college) !== -1 &&
          item.campus.indexOf(campus) !== -1
        );
      })
      .slice(start, end);
    setTableList(result);
  };
  //获取员工表
  useEffect(() => {
    const { getEmployeeList } = props;
    getEmployeeList();
  }, []);

  useEffect(() => {
    const { employee } = props;
    TableList(employee);
  }, [props.employee, size, current]);

  useEffect(() => {
    let columns = [
      {
        title: "编号",
        dataIndex: "number",
        key: "number",
        width: "150px",
      },
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
        width: "150px",
      },
      {
        title: "用户名",
        dataIndex: "userRoot",
        key: "userRoot",
        width: "150px",
      },
      {
        title: "电话",
        dataIndex: "phone",
        key: "phone",
        width: "150px",
      },
      {
        title: "邮箱",
        dataIndex: "email",
        key: "email",
        width: "150px",
      },
      {
        title: "操作",
        key: "action",
        width: "120px",
        render: (text, record) => (
          <Space size="middle">
            <SnippetsTwoTone
              onClick={(text) => {
                setTitle("查看");
                setEmployeeObj(record);
                setShow(true);
              }}
            />
            <EditTwoTone
              onClick={(text) => {
                setTitle("修改");
                setEmployeeObj(record);
                setEdit(true);
              }}
            />
            <DeleteTwoTone
              twoToneColor="#ff4d4f"
              onClick={(e) => {
                setTitle("删除");
                setEmployeeObj(record);
                setDel(true);
              }}
            />
          </Space>
        ),
      },
    ];
    setColumns(columns);
  }, []);
  //导航选择
  const handleClick = (e) => {
    const { key } = e;
    const { employee } = props;
    const keyPath = key.split("-");
    TableList(employee, keyPath[0], keyPath[keyPath.length - 1]);
  };

  //添加成功
  const okAdd = () => {
    const { addEmployeeList } = props;
    let Year = new Date().getFullYear();
    let random = Math.floor(Math.random()*(9999 - 1000)+1000);
    setAddObj({
      id: props.employee.length + 1,
      number:Year + "" + random,
      name: "",
      sex: "",
      age: "",
      userRoot: "",
      phone: "",
      email: "",
      college: "",
      campus: "",
      stage: "",
      position: "",
      state:"",
      identity:"",
      remark:""
    });
    addEmployeeList(addObj);
    setIsAdd(false);
  };

  //获取校区
  const campus = (value) => {
    const { collegelist } = props;
    let result: any = college.filter((item) => {
      return item.college.indexOf(value) !== -1;
    });
    let List = collegelist.filter((item) => {
      return item.college.indexOf(value) !== -1;
    });
    setCampusList(result[0].campus);
    setStage(JSON.parse(List[0].list));
  };
  //分页
  function changeCurrent(pageNumber) {
    setCurrent(pageNumber);
  }
  //改变页数大小
  const ShowSize = (current, size) => {
    setCurrent(current);
    setSize(size);
  };

  //取消查看
  const OkShow = () => {
    setShow(false);
  };
  //确定修改修改
  const okEdit = ()=>{
    const { editEmployeeInfo } = props;
    editEmployeeInfo({editObj:employeeObj});
    setEdit(false)
  }
  //确定删除
  const okDel = () => {
    const { DelEmployee } = props;
    DelEmployee({delObj:employeeObj})
    setDel(false);
  }

  
  
  return (
    <div className="Employee">
      <div className="header">
        <ul>
          <li>
            <Button
              type="primary"
              icon={<PlusCircleOutlined />}
              onClick={() => {
                setTitle("添加员工");
                setIsAdd(true);
              }}
            >
              添加员工
            </Button>
          </li>
          <li>
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={() => {
                importElement.current.click();
              }}
            >
              导入
            </Button>
            <input
              ref={importElement}
              type="file"
              accept=".xls,.xlsx"
              onChange={(e) => {
                importsExcel(e).then((res: any) => {
                  const { importEmployeeDate } = props;
                  let result = res.map((item) => {
                    return {
                      id: item.id,
                      number: item.number,
                      name: item.name,
                      sex: item.sex,
                      age: item.age,
                      userRoot: item.userRoot,
                      phone: item.phone,
                      email: item.email,
                      college: item.college,
                      campus: item.campus,
                      stage: item.stage,
                      position: item.position
                    };
                  });
                  importEmployeeDate({ importDate: result });
                });
              }}
            />
          </li>
          <li>
            <Button
              type="primary"
              icon={<UploadOutlined />}
              onClick={() => {
                exportExcel(header, tableList, "员工信息信息.xlsx");
              }}
            >
              导出
            </Button>
          </li>
        </ul>
      </div>
      <div className="main">
        <div className="nav">
          <Navigation
            // 总数据数据
            data={MenuList}
            // 一标题的属性（字段数组类型）"college":["网站工程","人工智能"]
            primaryNavigationProps="college"
            //二级标题的属性（字段）"college":["网站工程","人工智能"]
            childrenProps="campus"
            //设置二级标题对象属性
            childrenItem="name"
            //获取当前子级标题的key
            handleClick={handleClick}
            //设置样式
            style={{ width: "100%", height: 700, border: "1px solid #ccc" }}
          ></Navigation>
        </div>
        <div className="content">
          <Table
            studentData={tableList}
            columns={columns}
            style={{ height: 600 }}
          ></Table>
          <div className="current">
            <Pagination
              showQuickJumper
              defaultCurrent={current}
              defaultPageSize={size}
              showSizeChanger={props.employee.length > 10 ? true : false}
              pageSizeOptions={["10", "15", "20"]}
              total={props.employee.length}
              onChange={changeCurrent}
              onShowSizeChange={ShowSize}
            />
          </div>
        </div>
      </div>
      <MyAlert
        isModalVisible={isAdd}
        handleOk={okAdd}
        handleCancel={() => {
          setIsAdd(false);
        }}
        title={title}
        cancelText="取消"
        okText="确定"
      >
        <div id="add">
          <ul>
            <li>
              <span>姓名 :</span>
              <Input
                placeholder="请输入员工姓名"
                onBlur={(e) => {
                  setAddObj({
                    ...addObj,
                    name: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>性别 :</span>
              <Select
                placeholder="请选择性别"
                style={{ width: "60%" }}
                onChange={(value) => {
                  setAddObj({
                    ...addObj,
                    sex: value,
                  });
                }}
              >
                <Option value="男">男</Option>
                <Option value="女">女</Option>
              </Select>
            </li>
            <li>
              <span>年龄 :</span>
              <Input
                placeholder="请输入年龄"
                onBlur={(e) => {
                  setAddObj({
                    ...addObj,
                    age: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>身份证号 :</span>
              <Input
                placeholder="请输入身份证"
                onBlur={(e) => {
                  setEmployeeObj({
                    ...employeeObj,
                    identity: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>用户名 :</span>
              <Input
                placeholder="请输入用户名"
                onBlur={(e) => {
                  setAddObj({
                    ...addObj,
                    userRoot: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>电话 :</span>
              <Input
                placeholder="请输入电话"
                onBlur={(e) => {
                  setAddObj({
                    ...addObj,
                    phone: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>邮箱 :</span>
              <Input
                placeholder="请输入邮箱"
                onBlur={(e) => {
                  setAddObj({
                    ...addObj,
                    email: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>学院 :</span>
              <Select
                placeholder="请选择学院"
                style={{ width: "60%" }}
                onChange={(value) => {
                  campus(value);
                  setAddObj({
                    ...addObj,
                    college: value,
                  });
                }}
              >
                {college.map((item) => {
                  return (
                    <Option key={item.id} value={item.college}>
                      {item.college}
                    </Option>
                  );
                })}
              </Select>
            </li>
            <li>
              <span>校区 :</span>
              <Select
                placeholder="请选择校区"
                style={{ width: "60%" }}
                onChange={(value) => {
                  setAddObj({
                    ...addObj,
                    campus: value,
                  });
                }}
              >
                {campusList &&
                  campusList.map((item) => {
                    return (
                      <Option key={item.id} value={item.name}>
                        {item.name}
                      </Option>
                    );
                  })}
              </Select>
            </li>
            <li>
              <span>阶段 :</span>
              <Select
                placeholder="请选择阶段"
                style={{ width: "60%" }}
                onChange={(value) => {
                  setAddObj({
                    ...addObj,
                    stage: value,
                  });
                }}
              >
                {stage &&
                  stage.map((item, index) => {
                    return (
                      <Option key={index} value={item}>
                        {item}
                      </Option>
                    );
                  })}
              </Select>
            </li>
            <li>
              <span>员工类别 :</span>
              <Select
                placeholder="请选择员工类别"
                style={{ width: "60%" }}
                onChange={(value) => {
                  setAddObj({
                    ...addObj,
                    position: value,
                  });
                }}
              >
                <Option value="讲师">讲师</Option>
                <Option value="导员">导员</Option>
              </Select>
            </li>
            <li>
              <span>状态 :</span>
              <Select
                placeholder="请选择状态"
                style={{ width: "60%" }}
                onChange={(value) => {
                  setEmployeeObj({
                    ...employeeObj,
                    state: value,
                  });
                }}
              >
                <Option value="在职">在职</Option>
                <Option value="休假">休假</Option>
                <Option value="离职">离职</Option>
              </Select>
            </li>
            <li>
              <span>备注 :</span>
              <Input
                placeholder="请输入备注"
                onBlur={(e) => {
                  setEmployeeObj({
                    ...employeeObj,
                    remark: e.target.value,
                  });
                }}
              />
            </li>
          </ul>
        </div>
      </MyAlert>
      <MyAlert
        isModalVisible={show}
        handleOk={OkShow}
        handleCancel={() => {
          setShow(false);
        }}
        title={title}
        cancelText="取消"
        okText="确定"
      >
        <div id="show">
          <ul>
            <li>
              <span>姓名 :</span>
              <span>{employeeObj.name}</span>
            </li>
            <li>
              <span>性别 :</span>
              <span>{employeeObj.sex}</span>
            </li>
            <li>
              <span>年龄 :</span>
              <span>{employeeObj.age}</span>
            </li>
            <li>
              <span>身份证号 :</span>
              <span>{employeeObj.identity}</span>
            </li>
            <li>
              <span>用户名 :</span>
              <span>{employeeObj.userRoot}</span>
            </li>
            <li>
              <span>电话 :</span>
              <span>{employeeObj.phone}</span>
            </li>
            <li>
              <span>邮箱 :</span>
              <span>{employeeObj.email}</span>
            </li>
            <li>
              <span>学院 :</span>
              <span>{employeeObj.college}</span>
            </li>
            <li>
              <span>校区 :</span>
              <span>{employeeObj.campus}</span>
            </li>
            <li>
              <span>阶段 :</span>
              <span>{employeeObj.stage}</span>
            </li>
            <li>
              <span>员工类别 :</span>
              <span>{employeeObj.position}</span>
            </li>
            <li>
              <span>状态 :</span>
              <span>{employeeObj.state}</span>
            </li>
            <li>
              <span>备注 :</span>
              <span>{employeeObj.remark}</span>
            </li>
          </ul>
        </div>
      </MyAlert>
      <MyAlert
        isModalVisible={edit}
        handleOk={okEdit}
        handleCancel={() => {
          setEdit(false);
        }}
        title={title}
        cancelText="取消"
        okText="确定"
      >
        <div id="add">
          <ul>
            <li>
              <span>姓名 :</span>
              <Input
                placeholder={employeeObj.name}
                onBlur={(e) => {
                  setEmployeeObj({
                    ...employeeObj,
                    name: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>性别 :</span>
              <Select
                placeholder={employeeObj.sex}
                style={{ width: "60%" }}
                onChange={(value) => {
                  setEmployeeObj({
                    ...employeeObj,
                    sex: value,
                  });
                }}
              >
                <Option value="男">男</Option>
                <Option value="女">女</Option>
              </Select>
            </li>
            <li>
              <span>年龄 :</span>
              <Input
                placeholder={employeeObj.age}
                onBlur={(e) => {
                  setEmployeeObj({
                    ...employeeObj,
                    age: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>身份证号 :</span>
              <Input
                placeholder={employeeObj.identity}
                onBlur={(e) => {
                  setEmployeeObj({
                    ...employeeObj,
                    identity: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>用户名 :</span>
              <Input
                placeholder={employeeObj.userRoot}
                onBlur={(e) => {
                  setEmployeeObj({
                    ...employeeObj,
                    userRoot: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>电话 :</span>
              <Input
                placeholder={employeeObj.phone}
                onBlur={(e) => {
                  setEmployeeObj({
                    ...employeeObj,
                    phone: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>邮箱 :</span>
              <Input
                placeholder={employeeObj.email}
                onBlur={(e) => {
                  setEmployeeObj({
                    ...employeeObj,
                    email: e.target.value,
                  });
                }}
              />
            </li>
            <li>
              <span>学院 :</span>
              <Select
                placeholder={employeeObj.college}
                style={{ width: "60%" }}
                onChange={(value) => {
                  campus(value);
                  setEmployeeObj({
                    ...employeeObj,
                    college: value,
                  });
                }}
              >
                {college.map((item) => {
                  return (
                    <Option key={item.id} value={item.college}>
                      {item.college}
                    </Option>
                  );
                })}
              </Select>
            </li>
            <li>
              <span>校区 :</span>
              <Select
                placeholder={employeeObj.campus}
                style={{ width: "60%" }}
                onChange={(value) => {
                  setEmployeeObj({
                    ...employeeObj,
                    campus: value,
                  });
                }}
              >
                {campusList &&
                  campusList.map((item) => {
                    return (
                      <Option key={item.id} value={item.name}>
                        {item.name}
                      </Option>
                    );
                  })}
              </Select>
            </li>
            <li>
              <span>阶段 :</span>
              <Select
                placeholder={employeeObj.stage}
                style={{ width: "60%" }}
                onChange={(value) => {
                  setEmployeeObj({
                    ...employeeObj,
                    stage: value,
                  });
                }}
              >
                {stage &&
                  stage.map((item, index) => {
                    return (
                      <Option key={index} value={item}>
                        {item}
                      </Option>
                    );
                  })}
              </Select>
            </li>
            <li>
              <span>员工类别 :</span>
              <Select
                placeholder={employeeObj.position}
                style={{ width: "60%" }}
                onChange={(value) => {
                  setEmployeeObj({
                    ...employeeObj,
                    position: value,
                  });
                }}
              >
                <Option value="讲师">讲师</Option>
                <Option value="导员">导员</Option>
              </Select>
            </li>
            <li>
              <span>状态 :</span>
              <Select
                placeholder={employeeObj.state}
                style={{ width: "60%" }}
                onChange={(value) => {
                  setEmployeeObj({
                    ...employeeObj,
                    state: value,
                  });
                }}
              >
                <Option value="在职">在职</Option>
                <Option value="休假">休假</Option>
                <Option value="离职">离职</Option>
              </Select>
            </li>
            <li>
              <span>备注 :</span>
              <Input
                placeholder={employeeObj.remark}
                onBlur={(e) => {
                  setEmployeeObj({
                    ...employeeObj,
                    remark: e.target.value,
                  });
                }}
              />
            </li>
          </ul>
        </div>
      </MyAlert>
      <MyAlert
        isModalVisible={del}
        handleOk={okDel}
        handleCancel={() => {
          setDel(false);
        }}
        title={title}
        cancelText="取消"
        okText="确定"
      >
        <div id="add">
          <h3>你确定删除该员工的相关信息吗?</h3>
        </div>
      </MyAlert>
    </div>
  );
};
const mapStateToProps = (state) => {
  return state.administratorReducer;
};
export default connect(mapStateToProps, action.administratorActions)(Employee);
